<template>
  <div>
    <el-dialog @close="dialogFormVisible" :title="title" :visible="showDialog">
      <el-form :model="form" :rules="rules" ref="deptForm">
        <el-form-item label="部门名称" prop="name" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="code" label-width="120px">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部分负责人" prop="manager" label-width="120px">
          <el-select
            v-model="form.manager"
            placeholder="请选择负责人"
            @focus="getDeptlist"
          >
            <el-option
              :label="item.username"
              :value="item.username"
              v-for="item in staffList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce" label-width="120px">
          <el-input
            v-model="form.introduce"
            autocomplete="off"
            type="textarea"
            rows="8px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入请求
import {
  getDepartments,
  adddePartment,
  examinePartment,
  putPartment,
} from "@/api/departments.js";
import { getstaffList } from "@/api/employees.js";
export default {
  props: {
    pid: {
      required: true,
      type: String,
    },
    // 外界传入的控制显示隐藏
    showDialog: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    // 表单验证规则
    let checkName = async (rule, value, callback) => {
      // 发起请求拿到所有的数据
      let res = await getDepartments();
      if (this.form.id) {
        // 如果有id判断进入到编辑页面
        // 1.0判断目前表单所对应的的数据是否同级
        let list = res.data.depts.filter((item) => item.pid == this.form.pid);
        // 如果是同级 判断遍历到的所有数据中有没有pid是等于我目前表单中输入的名字
        let repeat = list.some(
          (item) => item.name == value && item.name != this.oldform.name
        );
        repeat ? "不能存在相同的部门名称,请修改!" : callback();
      } else {
        // 发起请求拿到所有的数据
        // let res = await getDepartments();
        // 判断输入的名字在通缉中是否重名
        let list = res.data.depts.filter((item) => {
          if (item.pid == this.pid) {
            return true;
          }
        });
        for (let i = 0; i < list.length; i++) {
          if (list[i].name === value) {
            return callback(new Error("已经存在的部门!"));
          }
        }
        callback();
      }
    };
    // 部门编码校验
    let checkCode = async (rule, value, callback) => {
      // 发起请求拿到所有数据
      let res = await getDepartments();
      let repeat;
      if (this.form.id) {
        repeat = res.data.depts.some(
          (item) => item.code == value && item.code != this.form.code
        );
      } else {
        // 判断是否重复
        repeat = res.data.depts.some((item) => item.code === value);
        // 返回true 则代表有重复的
        repeat ? callback(new Error("编码已存在,请修改!")) : callback();
      }
    };
    return {
      // 旧表单数据
      oldform: {
        name: "",
        code: "",
      },
      // 请求普通员工数据
      staffList: [],
      // 表单绑定数据
      form: {},
      //   表单绑定规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入部门名称:",
            trigger: "blur",
          },
          { min: 1, max: 50, message: "内容在1-50长度", trigger: "blur" },
          { validator: checkName, trigger: "blur" },
        ],
        code: [
          {
            required: true,
            message: "请输入部门编码:",
            trigger: "blur",
          },
          { min: 1, max: 50, message: "内容在1-50长度", trigger: "blur" },
          { validator: checkCode, trigger: "blur" },
        ],
        // 负责人
        manager: [
          {
            required: true,
            message: "请选择:",
            trigger: "blur",
          },
        ],
        // 文本域
        introduce: [
          {
            required: true,
            message: "请输入部门介绍",
            trigger: "blur",
          },
          { min: 1, max: 300, message: "内容在1-300长度", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    dialogFormVisible() {
      // 清空表单内容 但是无法清除id
      this.form = {};
      // 清空重置整个表单验证包括id
      this.$refs.deptForm.resetFields();
      // 隐藏form表单
      this.$emit("update:showDialog", false);
    },
    // 获取焦点时请求最新员工数据避免数据延迟
    async getDeptlist() {
      // console.log(123);
      let res = await getstaffList();
      // console.log(res);
      // 绑定数据
      this.staffList = res.data;
    },
    // 确定提交
    save() {
      // 判断表单验证是否通过
      this.$refs.deptForm.validate(async (isok) => {
        if (isok) {
          if (this.form.id) {
            // 传入整个表单中包含id
            await putPartment(this.form);
            // 提示修改成功
            this.$message.success("修改部门成功!");
          } else {
            // 点击确认后发起请求
            await adddePartment({
              ...this.form,
              pid: this.pid,
            });
            // 提示
            this.$message.success("新增部门成功！");
          }
          // 重新发起请求刷新页面
          this.$emit("doDept");
          // 隐藏form表单
          this.$emit("update:showDialog", false);
        }
      });
    },
    async getDetail(id) {
      let res = await examinePartment(id);
      this.form = res.data;
      // 把名字和编码存到一个变量中
      this.oldform.name = this.form.name;
      this.oldform.code = this.form.code;
    },
  },
  computed: {
    // 功能名字
    title() {
      return this.form.id ? "编辑部门" : "新增部门";
    },
  },
};
</script>

<style>
</style>